<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字截断效果</title>
  <style>
    /* 2. 设置好HTML架构后, 两行文字起同一个名; 然后都进行设置 "文字截断" 效果： */
    .truncate {
      /* 2.2 超出父盒子后, 隐藏 */
      overflow: hidden;

      /* 2.3 超出部分不换行 */

      white-space: nowrap;
      /* 2.4 超出文字部分 ->以 "..." 形式进行展示： */
      text-overflow: ellipsis;
    }

    .container {
      max-width: 100px;
      padding: 10px;
      border-radius: 7px;
      color: #fff;
      background-color: #3c80f4;
    }

    /* 3. 含有按钮的行 ".complex-line", 设置其为 Flex 容器： */
    .complex-line {
      display: flex;
    }

    /* 4. 借助 Flex Item 的 flex-shrink 属性默认值为 1 的特性, 允许含有文字的 Flex Item, */
    /* "span.truncate" 在按钮 "span.icon" 需要展示的时候进一步缩放,<腾出空间>,用于完整展示按钮 */
    .complex-line:hover .icon {
      display: block;
    }
    .icon {
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <p class="complex-line truncate">
      <span class="truncate">海和天相连成为海岸线</span>
      <span class="icon">❤️</span>
    </p>
    <p class="truncate">鱼和水相濡以沫的世界</p>
  </div>
</body>
</html>